<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">
    <link href="../lib/icons.css" rel="stylesheet">

    <title>Test ListView - Metro UI :: Popular HTML, CSS and JS library</title>

</head>
<body class="m4-cloak p-ab">
<nav data-role="appbar">
    <span class="app-bar-item">ListView</span>
    <div class="app-bar-item-static">
        <input type="checkbox" data-role="theme-switcher" data-state="dark"/>
    </div>
</nav>

<div class="container">
    <h1>ListView test page</h1>

    <div>
        <button class="button" onclick="selectSpecified()">Select specified</button>
        <button class="button" onclick="selectSpecified(false)">Deselect specified</button>
    </div>
    <div>
        <div class="p-4 d-flex flex-justify-between border bd-default mt-4">
            <label class="d-flex">List <input class="ml-1" type="radio" name="r1" value="list" title=""></label>
            <label class="d-flex">Table <input class="ml-1" type="radio" name="r1" value="table"  title=""></label>
            <label class="d-flex">Content <input class="ml-1" type="radio" name="r1" value="content" title=""></label>
            <label class="d-flex">Tiles <input class="ml-1" type="radio" name="r1" value="tiles" title=""></label>
            <label class="d-flex">Icons <input class="ml-1" type="radio" name="r1" value="icons" title="" checked></label>
            <label class="d-flex">Medium Icons <input class="ml-1" type="radio" name="r1" value="icons-medium" title=""></label>
            <label class="d-flex">Large Icons <input class="ml-1" type="radio" name="r1" value="icons-large" title=""></label>
        </div>
    </div>

    <br>

    <div>
        <ul data-role="listview" data-selectable="true" data-view="icons" id="listview" data-select-node="true" data-structure='{"date": true, "name": true}'>
            <li id="l1" data-icon="<span class='mif-folder fg-orange'>" data-caption="Video" data-content="<div class='mt-1' data-role='progress' data-value='35' data-small='true'>" data-date="12/21/2017" data-name="Video library"></li>
            <li id="l2" data-icon="<span class='mif-folder fg-cyan'>" data-caption="Images" data-content="<div class='mt-1' data-role='progress' data-value='78' data-small='true'>" data-date="12/21/2017" data-name="My images"></li>
            <li id="l3" data-icon="<span class='mif-folder fg-green'>" data-caption="Documents" data-content="<div class='mt-1' data-role='progress' data-value='24' data-small='true'>" data-date="12/21/2017" data-name="My documents"></li>
            <li id="l4" data-icon="<span class='mif-folder-download fg-blue'>" data-caption="Downloads" data-content="<div class='mt-1' data-role='progress' data-value='85' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
            <li id="l5" data-icon="<span class='mif-folder'>" data-caption="Desktop" data-content="<div class='mt-1' data-role='progress' data-value='10' data-small='true'>" data-date="12/21/2017" data-name="System folder"></li>
            <li id="l6" data-icon="<span class='mif-file-empty'>" data-caption="desktop.ini" data-content="<span class='text-muted'>Created: 12.21.2017</span>"></li>
            <li id="l7" data-icon="<span class='mif-file-binary'>" data-caption="setup.exe" data-content="<span class='text-muted'>Executable</span>"></li>
            <li id="l8" data-icon="<span class='mif-file-empty'>" data-caption="file1.dat" data-content="<span class='text-muted'>Data file</span>"></li>
        </ul>
    </div>

</div>

<script src="../lib/metro.js"></script>
<script>
    "use strict";

    function selectSpecified(select){
        var val = ["l2", "l5", "l7", "l8"], attr = "id";
        var lv = Metro.getPlugin("#listview", "listview");
        $.each(val, function(){
            lv.selectByAttribute(attr, this, select);
        })
    }

    function nodeClick() {
        console.log('node click');
    }

    function nodeDblClick() {
        console.log('node dbl click');
    }

    $("input[name=r1]").on("click", function(){
        var checked = $(this).is(":checked");
        if (checked) {
            Metro.getPlugin("#listview", "listview").view(this.value);
        }
    });

</script>
</body>
</html>
